<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div class="fly-header layui-bg-black" th:fragment="header-div">
    <div class="layui-container">
        <a class="fly-logo" href="/">
            <img src="/res/images/logo.png" style="width: 130px" alt="layui">
        </a>
        <ul class="layui-nav fly-nav layui-hide-xs">
            <li id="talk" class="layui-nav-item">
                <a href="/"><i class="layui-icon">&#xe611;</i>交流中心</a>
            </li>
            <li id="learn" class="layui-nav-item">
                <a href="/learn"><i class="layui-icon">&#xe705;</i>学习中心</a>
            </li>
            <li id="exam" class="layui-nav-item">
                <a href="/exam"><i class="layui-icon">&#xe6b2;</i>考试中心</a>
            </li>
        </ul>

        <ul class="layui-nav fly-nav-user">

            <!-- 未登入的状态 -->
            <div th:if="${session.user} == null">
                <li class="layui-nav-item">
                    <a class="iconfont icon-touxiang layui-hide-xs" href="/user/login"></a>
                </li>
                <li class="layui-nav-item">
                    <a href="/user/login">登入</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/user/reg">注册</a>
                </li>
                <li class="layui-nav-item">
                    <input type="text" name="word" placeholder="请输入单词" class="layui-input">
                </li>
                <li class="layui-nav-item">
                    <button onclick="translation(this)" class="layui-btn layui-btn-normal">翻译</button>
                </li>
            </div>

            <!-- 登入后的状态 -->
            <div th:if="${session.user} != null">
                <li class="layui-nav-item">
                    <a class="fly-nav-avatar" href="javascript:;">
                        <cite class="layui-hide-xs" th:text="${session.user.username}"></cite>
                        <img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="user/set.html"><i class="layui-icon">&#xe620;</i>基本设置</a></dd>
                        <dd><a href="user/message.html"><i class="iconfont icon-tongzhi" style="top: 4px;"></i>我的消息</a></dd>
                        <dd><a href="user/home.html"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>我的主页</a></dd>
                        <hr style="margin: 5px 0;">
                        <dd><a href="/user/logout/" style="text-align: center;">退出</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item">
                    <input type="text" name="word" placeholder="请输入单词" class="layui-input">
                </li>
                <li class="layui-nav-item">
                    <button onclick="translation(this)" class="layui-btn layui-btn-normal">翻译</button>
                </li>
            </div>

        </ul>
    </div>
</div>
</html>